<script setup lang="ts">
import { InputT } from './type'
let isShow = ref(true)
let inputType = ref<InputT>('password')

const onShowOpen = () => {
  isShow.value = !isShow.value
  inputType.value = isShow.value ? 'password' : 'text'
}

let passwordValue = ref('')
watch(passwordValue, (val) => {
  console.log(val)
})
</script>

<template>
  <vs-user-input label="密码" :type="inputType" v-model="passwordValue">
    <template #left>
      <van-image
        width="20"
        height="20"
        src="/src/assets/images/icon/password.png"
      />
    </template>
    <template #right>
      <template v-if="isShow">
        <van-image
          width="22"
          height="22"
          src="/src/assets/images/icon/pwd-close.png"
          @click="onShowOpen"
        />
      </template>
      <template v-else>
        <van-image
          width="22"
          height="22"
          src="/src/assets/images/icon/pwd-open.png"
          @click="onShowOpen"
        />
      </template>
    </template>
  </vs-user-input>
</template>

<style scoped></style>
